<template>
  <div class="row">
    <div class="col-lg-3 col-md-6" v-for="$val in nodeList">
      <div :class="'panel dbboxes panel-' + colorList[$val.category]">
        <div class="panel-heading">
          <div class="dbbox">
            <div :class="'thread-chart thread-chart-' + $val.node" :style="threadsMap[$val.node] && threadsMap[$val.node].retinaMode? {zoom: 0.5} : ''">
              <font size="20" color="#ffa07a">Inactive </font>
            </div>
            <div class="thread-number" :id="'threads-' + $val.node">
              {{threadsMap[$val.node] && threadsMap[$val.node].curThreadsNum || ''}}
              <i :class="threadsMap[$val.node] && threadsMap[$val.node].cls || ''"></i>
            </div>
            <div class="title">Threads</div>
            <div class="db_tasks">
              <div :class="'task-slave task-slave-' + $val.node">
                <i :class="slaveMap[$val.node] && slaveMap[$val.node].cls || ''" data-toggle="tooltip" data-placement="bottom" :title="slaveMap[$val.node] && slaveMap[$val.node].info || ''"></i>
              </div>
              <div :class="'task-backup task-backup-' + $val.node">
                <span :style="{color: backupMap[$val.node] && backupMap[$val.node].color || ''}">
                  <i :class="backupMap[$val.node] && backupMap[$val.node].cls || ''" data-toggle="tooltip" data-placement="bottom" :title="backupMap[$val.node] && backupMap[$val.node].title || ''"></i> 
                </span>
              </div>
              <div class="task-tp">
                <ul id="task-tp-item"></ul>
              </div>
            </div>
          </div>
        </div>
        <a class="a-link" @click="dbDetailMethod($val.node)">
          <div class="panel-footer">
            <span class="pull-left" :id="'footer-' + $val.node">{{$val.node.toUpperCase() }} </span>
            <span class="pull-right">View Details <i class="fa fa-arrow-circle-right"></i></span>
            <div class="clearfix"></div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import loadDbDatas from './loadDbDatas'

export default {
  data() {
    return {
      current: true,
      colorList: ['blue', 'green', 'yellow', 'brown', 'purple'],
      nodeList: [],
      threadsMap: {},
      backupMap: {},
      slaveMap: {},
    }
  },

  mounted() {
    this.$store.commit('LOC_PAGE', this.$route.name)
    this.nodeList = this.$store.state.nodeList
    $(() => {
      this.loadDbDatasMethod()
      $("[data-toggle='tooltip']").tooltip();
    })
  },

  methods: {
    loadDbDatasMethod() {
      if (this.$store.state.page != 'DashBoard')
        return false
      loadDbDatas().then(result => {
        let {
          slaveMap,
          backupMap,
          threadsMap,
        } = result
        this.slaveMap = slaveMap
        this.backupMap = backupMap
        this.threadsMap = threadsMap
        setTimeout(() => {
          this.loadDbDatasMethod()
        }, this.$store.state.interval)

      })
    },

    dbDetailMethod(node) {
      this.$router.push({
        name: 'DbDetail',
        query: {
          node,
        }
      })
    },

  },
}

</script>
<style>


</style>
